/**
 * Created by mac on 2017/6/7.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    ActivityIndicator
} from 'react-native';

//cat 数据
let middleAdvsData = require('./data.json')

var screenW = Dimensions.get('window').width;
var itemCount = 4;
var kong = 0;
var itemW = (screenW-kong*2-(itemCount-1)*kong*2)/itemCount;
export default class Cat extends Component{

    // 构造
      constructor(props) {
        super(props);
        this.renderDetailView=this.renderDetailView.bind(this);
        // 初始状态
        this.state = {

        };
      }

    renderDetailView(allData){

        let data = allData.data.recommendChannel.middleAdvs;

        var row= [];

        if(data.length === 0){
            return (
                <View style={{flex:1}}>
                    <ActivityIndicator size='large' color='gray'/>
                </View>
            )
        }

        for (let i=0;i<data.length;i++){


            row.push(
                <View style={{flex:1,}}>
                    <Image key={i} style={{width:itemW,height:itemW,alignSelf:'center'}} source={{uri:data[i].pic}}/>
                </View>
            )

        }

        return(

                <ScrollView contentContainerStyle={{width:screenW}}
                            horizontal={true}
                            bounces={false}
                           >
                    <View  style={{
                        flexDirection:'row',
                        backgroundColor:'#eeeeee',
                        justifyContent:'center',
                        flex:1
                    }}>
                        {row}
                    </View>

            </ScrollView>
        )

    }

    render(){
        return (
            <View style={styles.backgroundView}>
                {this.renderDetailView(middleAdvsData)}
            </View>
        )
    }
}

const styles=StyleSheet.create({
    backgroundView:{
        height:100,
        width:screenW,
        backgroundColor:'#eeeeee',
        paddingTop:5,
        paddingBottom:5,
    }

})